<template>
  <div id="box">
      <div class="content">
        <div class="title">
          <div class="title_left">
              <div>{{title}}</div>
              <span>{{dic1}}</span> 
              <span>{{dic2}}</span>
          </div>
          <div class="title_right">
            查看全部>
          </div>
        </div>
        <div class="items">
          <div class="item" v-for="i in data" :key="i.id" :style="{'background':(color?color:'white')}">
            <img v-lazy="i.picture" alt="">
            <div>{{i.title}}</div>
            <div>{{i.alt}}</div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  props:["color","data","title","dic1","dic2"],
  data(){
    return {

    }
  },
  methods:{
    str(a){
      if(a.length >10){
        return a.slice(0,10) + "...";
      }else{
        return a
      }
    }
  },
}
</script>

<style scoped lang="less">
#box{
  width: 100%;
  height: 540px;
  background:white;
  .content{
    width: 1240px;
    margin:0 auto;
    height: 100%;
    .title{
      width: 100%;
      height: 115px;
      padding:40px 10px;
      display: flex;
      justify-content: space-between;
      .title_left{
        display: flex;
        align-items: flex-end;
        div{font-size: 32px;margin:0 2px;}
        span{font-size:16px;color:rgb(153,153,153);margin:2px 2px;}
      }
      .title_right{font-size: 16px;}
    }
    .items{
      width: 100%;
      height: 405px;
      display: flex;
      justify-content: space-between;
      .item{
        transition: .5s;
        &:hover{
          transform:translate(0,-5px);
          box-shadow:0 3px 8px rgba(0,0,0,.2) ;
        }
        line-height: 30px;
        width: 305px;
        height: 100%;
        text-align: center;
        & :nth-child(2){font-size: 22px;margin-top:20px}
        & :nth-child(3){font-size: 17px;color:#A1A1A1;margin-top:10px}
        img{
          display: block;
          width: 305px;
          height: 305px;
        }
      }
    }
  }
}
</style>